<template>
	<view class="create-order">
		<!-- 商品信息 -->
		<view class="goods-card">
			<image class="goods-image" :src="goods.mainImages[0].imageUrl" mode="aspectFill"></image>
			<view class="goods-info">
				<text class="goods-name">{{goods.name}}</text>
				<view class="price-info">
					<!-- 根据支付方式显示不同的价格信息 -->
					<template v-if="paymentType === 1">
						<!-- 现金支付 -->
						<text class="price">{{goods.price}}</text>
					</template>
					<template v-else-if="paymentType === 2">
						<!-- 积分支付 -->
						<text class="points">{{goods.points}}<text class="unit">积分</text></text>
					</template>
					<template v-else-if="paymentType === 3">
						<!-- 积分+现金 -->
						<text class="mixed-price">
							<text class="points">{{goods.pointsCashPoints}}</text>
							<text class="unit">积分</text>
							<text class="plus">+</text>
							<text class="cash">{{goods.pointsCashPrice}}</text>
						</text>
					</template>
					<template v-else-if="paymentType === 4">
						<!-- 礼品卡 -->
						<text class="gift-card">{{goods.giftCardNum}}张礼品卡</text>
					</template>
					<template v-else-if="paymentType === 5">
						<!-- 礼品券 -->
						<text class="gift-voucher">{{goods.giftVoucherNum}}张礼品券</text>
					</template>
					<text class="count">x{{count}}</text>
				</view>
			</view>
		</view>

		<!-- 配送地址 -->
		<view class="address-section" @tap="chooseAddress">
			<view class="address-content">
				<text class="label">配送</text>
				<view class="value-wrapper">
					<template v-if="address.id">
						<view class="address-info">
							<view class="user-info">
								<text class="name">{{address.receiverName}}</text>
								<text class="phone">{{address.receiverPhone}}</text>
							</view>
							<text class="detail">
								{{address.province}}{{address.city}}{{address.district}}{{address.detailAddress}}{{address.addressDetail}}
							</text>
						</view>
					</template>
					<text v-else class="no-address">请选择收货地址</text>
					<uv-icon name="arrow-right" size="32" color="#c8c9cc"></uv-icon>
				</view>
			</view>
		</view>

		<!-- 订单金额信息 -->
		<view class="amount-section">
			<!-- 商品金额，仅在现金支付和混合支付时显示 -->
			<view class="amount-item" v-if="paymentType === 1 || paymentType === 3">
				<text class="label">商品金额</text>
				<text class="value">¥{{totalAmount}}</text>
			</view>
			<!-- 积分数量，在积分支付和混合支付时显示 -->
			<view class="amount-item" v-if="paymentType === 2 || paymentType === 3">
				<text class="label">所需积分</text>
				<text class="value">{{paymentType === 2 ? goods.points : goods.pointsCashPoints}}积分</text>
			</view>
			<!-- 礼品卡/券数量 -->
			<view class="amount-item" v-if="paymentType === 4 || paymentType === 5">
				<text class="label">{{paymentType === 4 ? '礼品卡' : '礼品券'}}</text>
				<text class="value">{{paymentType === 4 ? goods.giftCardNum : goods.giftVoucherNum}}张</text>
			</view>
			<!-- 运费 -->
			<view class="amount-item" v-if="shippingFee > 0">
				<text class="label">运费</text>
				<text class="value">¥{{shippingFee}}</text>
			</view>
			<!-- 实付金额，仅在现金支付和混合支付时显示 -->
			<view class="amount-item total" v-if="paymentType === 1 || paymentType === 3">
				<text class="label">实付金额</text>
				<text class="value">¥{{payAmount}}</text>
			</view>
		</view>

		<!-- 备注 -->
		<view class="remark-section">
			<text class="label">备注</text>
			<input class="input" v-model="remark" placeholder="请输入备注信息" />
		</view>

		<!-- 底部操作栏 -->
		<view class="action-bar">
			<view class="amount-info">
				<template v-if="paymentType === 1">
					<text class="label">实付金额：</text>
					<text class="amount">{{payAmount}}</text>
				</template>
				<template v-else-if="paymentType === 2">
					<text class="label">所需积分：</text>
					<text class="points">{{goods.points}}积分</text>
				</template>
				<template v-else-if="paymentType === 3">
					<text class="mixed-payment">
						<text class="points">{{goods.pointsCashPoints}}积分</text>
						<text class="plus">+</text>
						<text class="amount">{{payAmount}}</text>
					</text>
				</template>
				<template v-else>
					<text class="label">所需{{paymentType === 4 ? '礼品卡' : '礼品券'}}：</text>
					<text class="gift">{{paymentType === 4 ? goods.giftCardNum : goods.giftVoucherNum}}张</text>
				</template>
			</view>
			<button class="submit-btn" @tap="submitOrder" :disabled="!address.id">
				提交订单
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsId: null,
				categoryId: null,
				paymentType: null,
				count: 1,
				goods: {},
				address: {},
				remark: '',
				totalAmount: 0,
				shippingFee: 0,
				payAmount: 0
			}
		},
		
		onLoad(options) {
			// 获取路由参数
			const { goodsId, categoryId, paymentType, count } = options
			this.goodsId = goodsId
			this.categoryId = categoryId
			this.paymentType = Number(paymentType)
			this.count = Number(count || 1)
			
			// 初始化数据
			this.fetchGoodsInfo()
			this.fetchDefaultAddress()
		},
		
		methods: {
			// 获取商品信息
			async fetchGoodsInfo() {
				try {
					const data = await this.$http.get(
						`/mall/goods/customer/byId?goodsId=${this.goodsId}&categoryId=${this.categoryId}`
					)
					if (data) {
						this.goods = data
						this.calculateAmount()
					}
				} catch (e) {
					console.error('获取商品信息失败:', e)
				}
			},
			
			// 获取默认地址
			async fetchDefaultAddress() {
				try {
					const data = await this.$http.get('/address/default')
					if (data) {
						this.address = data
					}
				} catch (e) {
					console.error('获取默认地址失败:', e)
					uni.showToast({
						title: '获取默认地址失败',
						icon: 'none'
					})
				}
			},
			
			// 选择地址
			chooseAddress() {
				uni.navigateTo({
					url: '/subpkg/address/address?from=order'
				})
			},
			
			// 计算金额
			calculateAmount() {
				// 商品总额
				if (this.paymentType === 1) {
					this.totalAmount = this.goods.price * this.count
				} else if (this.paymentType === 3) {
					this.totalAmount = this.goods.pointsCashPrice * this.count
				} else {
					this.totalAmount = 0
				}
				
				// 运费
				this.shippingFee = this.goods.shippingFee || 0
				
				// 实付金额
				this.payAmount = this.totalAmount + this.shippingFee
			},
			
			// 提交订单
			async submitOrder() {
				if (!this.address.id) {
					uni.showToast({
						title: '请选择收货地址',
						icon: 'none'
					})
					return
				}
				
				try {
					const orderData = {
						goodsId: this.goodsId,
						categoryId: this.categoryId,
						goodsCount: this.count,
						paymentType: this.paymentType,
						remark: this.remark,
						addressId: this.address.id
					}
					
					const order = await this.$http.post('/mall/order/create', orderData)
					
					if (order) {
						// 跳转到订单详情页
						uni.redirectTo({
							url: `/subpkg/order_detail/order_detail?orderId=${order.id}`
						})
					}
				} catch (e) {
					uni.showToast({
						title: '创建订单失败',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import 'create_order.scss';
</style>